<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-notice"></i> 新增公告
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div style="width:480px">
              <el-form ref="form" :model="notice" label-width="180px">
                <el-form-item label="公告标题：">
                    <el-input v-model="notice.notice_title" placeholder="请参考公告书文书格式"></el-input>
                </el-form-item>
                <el-form-item label="序列号：">
                    <el-input v-model="notice.serial_number" placeholder="zky_stu_xxxx"></el-input>
                </el-form-item>
                <el-form-item label="正文部分：">
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-left:180px;margin-bottom:20px;">
                <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
                <el-button class="editor-btn" type="primary" @click="submit" style="margin-top:20px;">发布</el-button>
            </div>
            
        </div>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
export default {
    name:'uploadNotice',
    data(){
        return {
            notice:{
                notice_title: '',
                serial_number:'',   //序列号
                notice_content:'' ,
                _name:'',           //用户名
                Release_date: '',    //日期

            },
            html:'',
            configs: {
            },
            content:''
        }
    },
    components: {
        mavonEditor
    },
    methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                var formdata = new FormData();
                formdata.append('file', $file);
                // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
                this.$http({
                    url: '/common/upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    this.$refs.md.$img2Url(pos, url);
                })
            },
            change(value, render){
                // render 为 markdown 解析后的结果
                this.html = render;
                this.notice.notice_content = render;
            },
            submit(){
                this.notice.Release_date = this.gitTime();
                this.notice._name = JSON.parse(localStorage.getItem('admin_user')).user.stu_name
                // console.log(this.notice)    //发送请求
                this.$http.post('http://118.31.124.52:3000/api/notice/insted',this.notice).then(() => {
                    this.$message.success('发布成功！');
                })
            },
            num(s){
                return s < 10 ? '0' + s: s;
            },
            gitTime(){
                let time = new Date()
                let year = time.getFullYear() //年
                let month = time.getMonth() + 1
                let date_ = time.getDate()
                let Hours = time.getHours()
                let Minutes = time.getMinutes()
                let Seconds = time.getSeconds()
            // 格式化的时间
                return year+"-"+this.num(month)+"-"+this.num(date_)+" "+this.num(Hours)+":"+this.num(Minutes)+":"+this.num(Seconds);
            }
    }
};
</script>

<style scoped>

</style>
